import React from 'react';
import { Avatar } from 'antd';
import edit from '../../assets/edit.svg';
import './index.css';
import { API } from 'src/typings';
import format from 'date-format';


type UserListProps = {
  user: API.User
}

type UserListState = {

}


class UserList extends React.Component<UserListProps, UserListState> {

  render() {
    return <div className="user-list-container">
      <div className="user-avatar item">
        <Avatar src={this.props.user.avatar} />
      </div>

      <div className="username item">
        {this.props.user.username}
      </div>

      <div className="nickname item">
        {this.props.user.nickname}
      </div>

      <div className="gender item">
        {this.props.user.gender === 0 ? '男' : this.props.user.gender === 1 ? '女' : '未知'}
      </div>

      <div className="birthday item">
        {format.asString('yyyy/MM/dd', new Date(this.props.user.birthday))}
      </div>

      <div className="create-time item">
        {format.asString('yyyy/MM/dd hh:mm:ss', new Date(this.props.user.createTime))}
      </div>

      <div className="update-time item">
        {format.asString('yyyy/MM/dd hh:mm:ss', new Date(this.props.user.updateTime))}
      </div>

      <div className="active item">
        {this.props.user.active ? '是' : '否'}
      </div>

      <div className="deleted item">
        {this.props.user.deleted ? '是' : '否'}
      </div>

      <div className="edit item">
        <img src={edit} alt="edit" />
      </div>
    </div>
  }
}


export default UserList;